import computer from "@/assets/computer.png";
import safer from "@/assets/safer.png";
import { useSelector } from "react-redux";
import CreateBubble from "@/components/CreateBubble";

function Home() {
    const isDark = useSelector((state: {
        theme: {
            flag: boolean
        }
    }) => state.theme.flag);


    return (
        <div className="min-h-screen relative bg-bigLightArea dark:bg-smallDarkArea">
            <div className="relative">
                <div className="mx-auto max-w-7xl flex gap-8">
                    {/* 左侧内容区域 */}
                    <div className="w-[45%] space-y-8 h-[100vh]">
                        {/* 天气组件
                        <Weather />
                        <Music /> */}
                        <CreateBubble />
                    </div>
                    {/* 右侧3D模型区域 */}
                    <div
                        className="w-[55%] relative transition-all h-[100vh]">
                        <div className="absolute inset-0">
                            <img
                                src={`${!isDark ? safer : computer}`}
                                alt="3D character"
                                className="w-full h-full object-contain transition-all"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Home;